<template>
  <div>

    <div class="demo-input-suffix" style="display: flex;align-content: center">
      用户
      <el-input placeholder="用户" prefix-icon="el-icon-search" v-model="username" style="width:15%;margin: 0px 10px 0px 10px;">
      </el-input>
      <el-button @click="handleCurrentChange" type="primary" icon="el-icon-search">搜索</el-button>
    </div>
    <div class="demo-input-suffix" style="display: flex;align-content: center;margin-top:20px">
      <el-button type="primary" plain icon="el-icon-plus" @click="addUserDialog = true">新增</el-button>
    </div>

    <template>
      <el-table :data="userList" style="width: 100%" v-loading="loading">
        <el-table-column prop="username" label="用户姓名" align="center"></el-table-column>
        <el-table-column prop="headImg" label="用户头像" width="100%" align="center">
          <template slot-scope="scope" align="center">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src="url + scope.row.headImg" alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src="url + scope.row.headImg" style="width: 100%;height: 100%">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="primary"
                       @click="editVideo(scope.row.id)"
                       icon="el-icon-edit">编辑
            </el-button>
            <el-button size="mini"
                       type="danger"
                       slot="reference"
                       icon="el-icon-delete"
                       @click="deletePrompt(scope.row.username,scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="pageNo"
                   :page-size="pageSize"
                   layout="prev, pager, next, jumper"
                   :total="pagesTotalCount" style="margin-top: 10px">
    </el-pagination>

    <el-dialog title="新增用户" :visible.sync="addUserDialog">
      <el-form ref="form" :model="user" label-width="80px">
        <el-form-item label="用户姓名 :">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码 :">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUser">确定</el-button>
          <el-button @click="quxiao">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="视频详情" :visible.sync="videoDetailsDialog">
<!--      <el-form ref="form" :model="videoDetails" label-width="80px">-->
<!--        <el-form-item label="视频标题 :">-->
<!--          <el-input v-model="videoDetails.videoTitle"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="视频首图 :">-->
<!--          <img :src="url + videoDetails.imgSrc" style="width:80px;height:80px;">-->
<!--        </el-form-item>-->
<!--        <el-form-item label="视频类型 :">-->
<!--          <el-input v-model="videoDetails.typeName"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="视频展示 :">-->
<!--          <video :src="url + videoDetails.videoSrc" style="width:80px;height:80px;"></video>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="创建日期 :">-->
<!--          <el-input v-model="videoDetails.createTime" :disabled="true"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户名称 :">-->
<!--          <el-input v-model="videoDetails.username" :disabled="true"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="浏览次数 :">-->
<!--          <el-input v-model="videoDetails.videoView" :disabled="true"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="表述内容 :">-->
<!--          <el-input type="textarea" v-model="videoDetails.explain"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="quedingxiugai">确定</el-button>-->
<!--          <el-button @click="quxiao">取消</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
    </el-dialog>

  </div>

</template>

<script>

import request from "../utils/request";

export default {
  name: 'User',
  components: {

  },
  data(){
    return{
      userList:[],
      //分页参数
      pageNo:1,//当前页码
      pageSize:10,//每页个数
      pageTotal:0,//页码数
      pagesTotalCount:0,//总条数
      //搜索内容
      typeName:'',
      username:'',
      url:'',
      loading: true,
      user: {},
      addUserDialog:false,
    }
  },
  mounted:function(){
    this.url=process.env.VUE_APP_BASE_API;
    this.handleCurrentChange();
  },
  methods:{
    handleCurrentChange:function() {//分页改变时会触发
      var that = this;
      that.loading = true;
      request.get("/videoWeb/user/userList", {
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          typeName: this.typeName,
          username: this.username,
        },
      }).then(res =>{
        that.userList = res.data;
        that.pageTotal = res.pageTotal;
        that.pagesTotalCount = res.pagesTotalCount;
        setTimeout(function (){
          that.loading = false;
        }, 300);
      })
    },
    deleteUser(id){//通过id删除视频信息
      var that = this;
      request.delete("/videoWeb/user/deleteUser",{
        params: {
          id: id,
        }
      }).then(res =>{
        that.handleCurrentChange();
      })
    },
    deletePrompt(username,id) {//删除提示框
      this.$confirm('确定要删除视频【'+ username +'】吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUser(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      });
    },
    editVideo(id) {//打开编辑框
      var that = this;
      request.get("",{
        params: {
          id: id,
        }
      }).then(res =>{
        that.videoDetails = res;
      });
      this.videoDetailsDialog = true;
    },
    quedingxiugai(){//修改视频

    },
    quxiao(){//取消修改
      this.videoDetailsDialog = false;
      this.addUserDialog = false;
      this.$message({
        message: '已取消!'
      });
    },
    addUser(){
      var that = this;
      console.log(this.user);
      request.post("/videoWeb/user/addUser",
        JSON.stringify(this.user),
      ).then(res =>{
        if(res.code == 200){
          that.handleCurrentChange();
          that.addUserDialog = false;
          this.$message({
            type: 'success',
            message: res.msg,
          });
        }else {
          this.$message({
            message: res.msg,
          });
        };
      });
    },
  }
}
</script>

